<template>
  <div>
  	<!--<div  @click="erweima=false"  v-show="erweima" style="width: 100%;height: 100%;background: gray;opacity: .8;position: absolute;z-index: 888;"></div>
  		<div  @click="erweima=false" v-show="erweima" style="position: absolute;background: white;z-index: 999;top: 18rem; left:7rem" class="qrcode2">
  			<div>使用须知：通过扫描条形码使用</div>
  			<svg id ='barcode2'></svg>
  		</div>-->
  		<div v-if="$route.query.guoqi" class="goBack" @click="go"></div>
  	<modal v-show="erweima" @close_modal="erweima=false">
  		<div class="ballot_result">
  			<!--<div style="width: 177px;margin: auto;height: 25px;background: white;"></div>-->
  			<svg id ='barcode2'></svg>
  		</div>
  	</modal>
  	<div class="banner"></div>
  	<div class="content">
  		<div class="coupon">
  			<div>{{param.mchtName}}</div>
  			<hr />
  			<div>
  				<div class="couponDiv">
                    <coupon-denomination :item="param"></coupon-denomination>
                </div>
                <div class="couponMess">
                	<p>{{param.couponName}}</p>
                	<p>已售出：{{param.soldnum}}</p>
                	<p>已使用：{{param.usednum}}</p>
                </div>
                  <div v-if="(param.thirdNo+ '').length<=11" style="position: absolute;right: 1rem;top: 14.9rem;"><svg id = 'barcode'  @click="erweima=true"> </svg> </div>
                  <div v-else style="position: absolute;right: 2rem;top: 16rem;color:#ec4e8a ;" @click="erweima=true">（查看条形码）</div>
                  
  			</div>
  		</div>
  		<img src="../../images/cardBg_04.png"/>

  	</div>
  	<div class="code">
  		<div id="card"><span>您的兑换码</span><span v-if='findCodeState' style="color: #ec4e8a;margin-left: 8rem;" @click="findCode">（查看已使用券码）</span></div>
  		<div id="scratch">
  			<div class="copyTxt">{{param.thirdNo | shiwei}}</div>
  			<div id="ss">{{param.thirdNo}}</div>
  			<div v-if="thirdUrlState" class="btns" @click="copy" data-clipboard-target="#ss" data-clipboard-action="copy">复制使用</div>
  			<div v-if="!thirdUrlState" class="btns" @click="copy" data-clipboard-target="#ss" data-clipboard-action="copy">复制</div>
  			<div class="fuzhiTxt">（复制兑换码至第三方商家平台使用）</div>
  		</div>
  		<div id="scratch" v-if="param.couPwd!=''">
  			<div class="copyTxt">{{param.couPwd | shiwei}}</div>
  			<div id="sss">{{param.couPwd}}</div>
  			<div class="btns" @click="copy" data-clipboard-target="#sss" data-clipboard-action="copy">复制</div>
  			<div class="fuzhiTxt">（复制此密码至第三方商家平台使用）</div>
  		</div>
  		<hr />
  		<div class="useGuize" v-if="!thirdUrlState">
  				<div>使用规则：</div>
  				<div>
  					<ul>
  						<li v-for="item in thirdDescArr">{{item}}</li>
  					</ul>
  				</div>
  		</div>
 	</div>
 	<reward-modal v-if="shareInfo1" @close="hiddenShareInfo()" :money="usrAmt" type='use'></reward-modal>
  </div>
</template>
<script>import * as types from '../../vuex/types.js'
import getData from '../../service/getData.js'
import { mapState } from 'vuex'
import { Storage } from 'src/utils/storage.js'
import { Toast, MessageBox } from 'mint-ui'
import RewardModal from 'src/componentes/global/reward/index.vue'
var JsBarcode = require('jsbarcode');
var pic1 = require('../../images/thirdCanvas2.png')
var pic2 = require('../../images/thirdCanvas.png')
export default {
	data() {
		return {
			param: '',
			shareInfo1: false,
			usrAmt: 0,
			thirdNo:0,
			erweima:false,
			copyState:true,
			thirdDescArr:[],
			thirdUrlState:'',
			thirdUrlDesc:'',
			findCodeState:false
		}
	},
	created: function() {
		this.thirdUrlState= this.$route.query.thirdUrlState
		this.getJsBarcode (); //动态导入刮卡插件
		this.$emit('header-info', {
			title: '使用优惠券',
			isBack: true,
			isMessage: false
		})
		let me = this
		getData.findThirdNo({
			method: 'get',
			data: {}
		}, me.$route.query.couNo).then(function(rep) {
			if(rep.respCode == "00") {
				me.param = rep.content.content.result[0]
				me.thirdUrlDesc=rep.content.content.result[0].thirdDesc
				me.thirdDescArr=me.param.thirdDesc.split('；')
				me.thirdNo=me.param.thirdNo
					me.qrcodeEvent(me.thirdNo)

		
				if(me.param.couPwd != '') {
						let couPwdArr=rep.content.content.result[0].couPwd.split('')

					document.getElementsByTagName("canvas")[1].style.display = 'block'
				} else {
					document.getElementsByTagName("canvas")[1].style.display = 'none'
				}
				
//				  	me.param.thirdNo=me.param.thirdNo.replace(/(\d{3})/g,'$1 ').replace(/\s*$/,'');
//									      me.usrAmt=rep.content.usrAmt
//									      if(me.usrAmt>0){
//									      	me.shareInfo1=true
//									      }
			} else {
				MessageBox.alert('该券已核销').then(action => {
					//			window.history.go(-1)
				});
			}

		})
		
		 getData.getThirdDesc({method:'post',data:{mchtId:me.$route.query.mchtId,couponId:me.$route.query.couponId,usrId:me.userInfo.usrId}}).then(function(rep){
		 		if(rep.content.result.length>0){
		 			me.findCodeState=true
		 		}else{
		 			me.findCodeState=false
		 		}
		 })

	},
	components: {
		RewardModal
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	methods: {
		findCode(){
			let me=this
			if(me.thirdUrlState){
				 me.$router.push({
            'name': 'usedRedeemCode',
            query: {couponId:me.param.couponId,mchtId:me.param.mchtId,thirdUrlState:'true'}
          });
			
			}else{
				 me.$router.push({
            'name': 'usedRedeemCode',
            query: {couponId:me.param.couponId,mchtId:me.param.mchtId}
          });
			}	
		},
		go(){
  		this.$router.push({"path":'/expiredDetail/'+this.$route.query.mchtId+'/'+this.$route.query.couponId+'/'+this.$route.query.couponNum,query:{guoqi:true}});
  	},
		qrcodeEvent(x){
			JsBarcode("#barcode", x,{width:1,height:35,  displayValue:false});
			JsBarcode("#barcode2", x,{width:1,height:65,  displayValue:false});
		},
		copy() {
				var me=this
				
			var clipboard = new Clipboard('.btns');
			if(me.copyState){
				me.copyState=false
					clipboard.on('success', e => {
					Toast({
						message: "复制成功",
						duration: 800
					});		
					clipboard.destroy();	
						if(me.thirdUrlState){
							location.href=me.thirdUrlDesc
						}
					setTimeout(function(){
						me.copyState=true					
					},1000)
			
			});
			}
		
			clipboard.on('error', function(e) {
				Toast({
					message: "复制失败，请重新操作",
					duration: 800
				});
			});
				
		},
		hiddenShareInfo() {
			this.shareInfo1 = false
		},
		getJsBarcode () {
			return  import(/* webpackChunkName: "JsBarcode" */ 'jsbarcode').then((JsBarc) => {
							JsBarcode = JsBarc;
						}).catch( (err) => `JsBarcode - ${err}`)
		}

	},
	mounted: function() {
		// console.log(this.JsBarcode)
		let me = this
		LuckyCard.case({
			coverImg:pic1,
			ratio: 0.01,
			callback: function() {			
				this.clearCover();
				document.getElementsByTagName("canvas")[0].style.display = 'none'
				setTimeout(function() {
					getData.ejectThird({
						method: 'post',
						data: {
							couNo: me.$route.query.couNo,
							couponId: me.$route.query.couponId,
							mchtId: me.$route.query.mchtId,
							usrId: me.userInfo.usrId
						}
					}).then(function(rep) {
						me.usrAmt = rep.content.usrAmt
						if(me.usrAmt > 0) {
							me.shareInfo1 = true
						}
					})
				}, 100)

			}
		});
		LuckyCard.case({
			coverImg:pic2,
			ratio: 0.01,
			callback: function() {
				
				this.clearCover();

				document.getElementsByTagName("canvas")[1].style.display = 'none'
			}
		});
		
	},
	filters:{
		shiwei:value => {
			if((value+ "").length >= 20){
				return value.slice(0,10) + '...' + value.slice(-10)
			}else{
				return value
			}
			
		}
	},
	beforeRouteEnter(to, from, next) {
		if(from.path == '/getThirdDesc') {
			window.history.go(-1)
		} else {
			next()
		}
	}
}</script>

<style scoped="scoped">.banner {
	background: url('../../images/RedeemCode.jpg') no-repeat left top;
	background-size: cover;
	height: 12rem;
}
 .displayState{
 	display: none;
 }
#ss,#sss{
		/*overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;*/
}
.content {
	width: 92%;
	height: 10rem;
	background: white;
	margin: -1rem auto;
	border-radius: .4rem;
}

.couponMess {
	padding: 1rem;
}

.couponMess p:nth-of-type(1) {
	margin-bottom: .5rem;
}

.couponMess p {
	text-indent: 1rem;
}

.coupon {
	padding: 1rem;
}

img {
	width: 100%;
	position: relative;
	top: 0rem;
}

.code {
	width: 92%;
	min-height: 15rem;
	background: white;
	margin: -1rem auto;
	overflow: hidden;
	padding-top: 1rem;
}

#card {
	margin-left: 1rem;
}

#scratch {
	height: 4rem;
	background: gainsboro;
	border-radius: 4rem;
	margin: 1rem 1rem 3rem;
	position: relative;
}

#scratch div:nth-of-type(1) {
	float: left;
	width: 70%;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	font-size: 1.3rem;
	text-align: center;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

#scratch .btns {
	float: right;
	width: 22%;
	height: 3rem;
	background: #ec4e8a;
	margin-right: 1rem;
	border-radius: 3rem;
	margin-top: .5rem;
	text-align: center;
	line-height: 3rem;
	color: #F0F0F0;
}

.useGuize {
	padding: 1rem;
}

.useGuize div:nth-of-type(2) {
	width: 100%;
	margin-top: 1rem;
	word-break:break-all;
}

.fuzhiTxt {
	height: 1rem;
	float: left;
	margin-top: 1rem;
}
.qrcode1{
	position: absolute;
	right:3rem;
	top: 17.3rem;
}
.goBack{
	
  z-index: 30;
  position: absolute;
  left: 0;
  top: 0rem;
  width: 50px;
  height: 50px;

}

</style>
<style>
	#cover:nth-of-type(1){
		 position: absolute;
		  top:0;
		  left:-.5rem;
	}
#cover:nth-of-type(2) {
	position: absolute;
	top: 7rem;
	left: -.5rem;
	z-index: 99;
}
.ballot_result {
  width: 90%;
  margin: auto;
  height: 16rem;
  /*line-height: 18rem;*/
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  margin-top: 50%;
  text-align: center;
}
#ss{
	position: absolute;
	z-index: -1000;
	opacity: 0;
}
#sss{
	position: absolute;
	z-index: -1000;
	opacity: 0;
}
</style>




